<script setup lang="ts">
import { reactive, ref, onMounted } from "vue"; //表格数据对象
import type { Goods } from "./../../model";
import { getGoodsList, delGoods, updateGoods } from "./../../api";
import { ElMessage, ElMessageBox } from "element-plus";
//表格数据对象
const tableData = ref<Goods[]>([]);
//表格原始数据
const oldData = ref<Goods[]>([]);
//分页变量
const currentPage = ref(1); //当前页
const pageSize = ref(5); //每页显示记录数
const totalRow = ref(0); //总记录数
//是否显示 添加修改商品对话框
const isShowDialog = ref(false);
//添加修改商品对话框的标题
const dialogTitle = ref("新增商品");
//当前将要修改的商品
const goods = reactive({
  id: 0,
  name: "",
  category_id: "",
  description: "",
  picture: "",
  price: "",
  spec: "",
  stock: "",
});
//定义表单数据对象
const searchForm = reactive({
  name: "",
});
//搜索关键字
const keyword = ref("");
//查询所有商品
async function loadGoodsList(page: number) {
  const params = {
    page,
    pagesize: pageSize.value,
    search: keyword.value,
  };
  const res = await getGoodsList(params);
  totalRow.value = res.data.data.total;
  oldData.value = res.data.data.list;
  tableData.value = res.data.data.list;
}
//表单搜索
function searchGoods() {
  keyword.value = searchForm.name;
  currentPage.value = 1;
  loadGoodsList(currentPage.value);
}
//表单重置
function resetForm() {
  keyword.value = "";
  searchForm.name = "";
  currentPage.value = 1;
  //显示第 1 页的数据列表
  loadGoodsList(1);
}
//点击分页按扭
function changePage(page: number) {
  currentPage.value = page;
  loadGoodsList(page);
}
//删除商品
function deleteGoods(data: Goods) {
  //确认对话框
  ElMessageBox.confirm("确定要删除此商品吗？", {
    closeOnClickModal: true,
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  })
    .then(async () => {
      const res = await delGoods({ id: data.id });
      if (res.data.errno == 0) {
        //重置搜索表单
        resetForm();
        //删除成功
        ElMessage.success(res.data.errmsg);
      } else {
        //删除失败
        ElMessage.error(res.data.errmsg);
      }
    })
    .catch(() => {
      //console.log("点击了取消按扭")
    });
}
//关闭对话框
function closeDialog() {
  isShowDialog.value = false;
  currentPage.value = 1;
  loadGoodsList(currentPage.value);
}
//组件加载完成
onMounted(() => {
  currentPage.value = 1;
  loadGoodsList(currentPage.value);
});
</script>
<template>
  <div>
    <!--搜索表单-->
    <section class="search">
      <el-form :inline="true">
        <el-form-item label="商品名称">
          <el-input v-model="searchForm.name" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchGoods">搜索</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </section>
    <!--表格显示内容-->

    <section class="goods_page">
      <div><el-button type="primary">新增商品</el-button></div>
      <div>
        <!--表格-->
        <el-table :data="tableData" row-key="id" style="width: 100%" border>
          <!--空数据时显示内容-->
          <template #empty>暂无数据</template>
          <!--表格有数据时的显示内容-->
          <el-table-column
            prop="id"
            label="商品编号"
            width="100"
          ></el-table-column>
          <el-table-column prop="name" label="商品名称"></el-table-column>
          <el-table-column
            prop="price"
            label="商品价格"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="stock"
            label="商品库存"
            width="100"
          ></el-table-column>
          <el-table-column prop="description" label="商品简介">
            <template #default="scope">
              <!--replace 函数，用于过滤 HTML 代码-->
              <el-text line-clamp="2"
                >{{ scope.row.description.replace(/<\/?[^>]+(>|$)/g, "") }}
              </el-text>
            </template>
          </el-table-column>
          <el-table-column label="商品图片" width="100">
            <template #default="scope">
              <img :src="scope.row.picture" />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template #default="scope">
              <el-button type="warning" @click="updateGoods(scope.row)"
                >编辑</el-button
              >
              <el-button type="danger" @click="deleteGoods(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--分页栏-->
      <div>
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="pageSize"
          :total="totalRow"
          v-model:current-page="currentPage"
          @change="changePage"
        />
      </div>
    </section>
  </div>
</template>
<style scoped>
.goods_page,
.search {
  background: #ffffff;
  border-radius: 5px;
  box-shadow: 0px 0px 5px 5px #e4e7ed;
  margin: 20px;
  border: 1px solid transparent;
}
.search {
  height: 50px;
  padding-left: 20px;
  display: flex;
  align-items: center;
}
.search .el-form-item {
  margin-top: 0px;
  margin-bottom: 0px;
}
.goods_page > div {
  margin: 20px;
}
.goods_page img {
  width: 50px;
  height: 50px;
}
</style>
